import React, { useState, useEffect } from "react";
import { Table, Input, Button, Space, Tooltip, Select, Modal } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { DOUBT_API } from "../../../api/config";
import axios from "axios";
// 导入弹窗组件
import IllegalDialog from "../component/illegalDialog";
const { Search } = Input;
const { Option } = Select;

// 新增一个状态来存储总数
// 修改组件名，根据文件名修改为 IllegalEcological
const IllegalEcological = () => {
  // 模拟数据
  const [dataSource, setDataSource] = useState([]);
  // 搜索关键词
  const [searchTerm, setSearchTerm] = useState("");
  // 当前页码，对应后端的 page
  const [page, setPage] = useState(1);
  // 每页条数，对应后端的 per_page
  const [perPage, setPerPage] = useState(10);
  // 存储总数
  const [total, setTotal] = useState(0);
  // 新增状态来存储多选下拉菜单选中的值
  const [searchFields, setSearchFields] = useState([]);

  // 控制弹窗显示隐藏
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 存储当前要传递给弹窗的整行数据
  const [currentRecord, setCurrentRecord] = useState(null);
  // 新增状态来存储弹窗类型参数
  const [modalType, setModalType] = useState(null);

  // 模拟从后端获取数据
  // 导入 axios 用于发送 HTTP 请求
  // 定义请求方法，添加搜索参数
  const fetchData = async () => {
    try {
      const params = {
        page: page,
        per_page: perPage,
        search_term: searchTerm,
        // 如果没有选择搜索字段，则不传该参数
        ...(searchFields.length > 0 && {
          search_fields: searchFields.join(","),
        }),
      };
      const response = await axios.get(DOUBT_API.ECOLOGICAL.LIST, { params });
      // 根据接口返回改造，从 res.data.data 中获取数据
      setDataSource(response.data.data.data);
      // 设置总数
      setTotal(response.data.data.total);
    } catch (error) {
      console.error("获取老年人补贴数据失败:", error);
    }
  };

  // 使用 useEffect 来在组件挂载时调用请求方法
  useEffect(() => {
    fetchData();
  }, [searchTerm, page, perPage, searchFields]); // 当搜索词、页码、每页条数或搜索字段变化时重新请求数据

  // 搜索处理函数，调用接口查询
  const handleSearch = (value) => {
    setSearchTerm(value);
    setPage(1); // 搜索后回到第一页
    fetchData();
  };
  // 打开弹窗的方法，传递整行数据和类型参数
  const showModal = (record) => {
    setCurrentRecord(record);
    setIsModalVisible(true);
  };

  // 根据给定配置修改表格列配置，添加 ellipsis 和 Tooltip 实现省略和悬停显示
  const columns = [
    {
      title: "序号",
      dataIndex: "id",
      key: "id",
      ellipsis: true,
      // render: (text) => <Tooltip title={text}>{text}</Tooltip>,
      render: (text, record, index) => {
        const currentNumber = index + 1;
        return <Tooltip title={currentNumber}>{currentNumber}</Tooltip>;
      },
    },
    {
      title: "乡镇",
      dataIndex: "township",
      key: "township",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "村名",
      dataIndex: "village_name",
      key: "village_name",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "户主姓名",
      dataIndex: "household_head",
      key: "household_head",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "面积（亩）",
      dataIndex: "area_mu",
      key: "area_mu",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "应发放金额",
      dataIndex: "amount_payable",
      key: "amount_payable",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "身份证号",
      dataIndex: "id_card",
      key: "id_card",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "银行账号",
      dataIndex: "bank_account",
      key: "bank_account",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "开户行名称",
      dataIndex: "bank_name",
      key: "bank_name",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "兑换时间/级别",
      dataIndex: "exchange_info",
      key: "exchange_info",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "干部身份证号",
      dataIndex: "cadre_id",
      key: "cadre_id",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "父亲身份证号",
      dataIndex: "father_id",
      key: "father_id",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "母亲身份证号",
      dataIndex: "mother_id",
      key: "mother_id",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "配偶身份证号",
      dataIndex: "spouse_id",
      key: "spouse_id",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "子女1身份证号",
      dataIndex: "child1_id",
      key: "child1_id",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "子女2身份证号",
      dataIndex: "child2_id",
      key: "child2_id",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "子女3身份证号",
      dataIndex: "child3_id",
      key: "child3_id",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "原因说明",
      dataIndex: "reason",
      key: "reason",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      ellipsis: true,
      render: (text) => <Tooltip title={text}>{text}</Tooltip>,
    },
    {
      title: "状态操作栏",
      key: "action",
      render: (_, record) => (
        <Space>
          <Button onClick={() => showModal(record)}>审核</Button>
        </Space>
      ),
    },
  ];

  // 生成多选下拉菜单的选项，排除状态操作栏
  const selectOptions = columns
    .filter((column) => column.key !== "action")
    .map((column) => (
      <Option key={column.dataIndex} value={column.dataIndex}>
        {column.title}
      </Option>
    ));

  // 分页配置
  const pagination = {
    current: page,
    pageSize: perPage,
    // 使用新的总数状态
    total: total,
    onChange: (newPage, newPerPage) => {
      setPage(newPage);
      setPerPage(newPerPage);
    },
  };

  return (
    <div>
      <Space>
        <Select
          mode="multiple"
          style={{ width: 200 }}
          placeholder="请选择搜索字段"
          onChange={(value) => setSearchFields(value)}
        >
          {selectOptions}
        </Select>
        <Search
          placeholder="输入相关信息搜索"
          onSearch={handleSearch}
          enterButton={<Button icon={<SearchOutlined />}>搜索</Button>}
          style={{ width: 300 }}
          // 添加清除按钮
          allowClear
        />
      </Space>
      <Table
        columns={columns}
        dataSource={dataSource}
        pagination={pagination}
        // 添加横向滚动条
        scroll={{ x: 2000 }} // 调整滚动宽度以适应新列
      />
      <IllegalDialog
        visible={isModalVisible}
        onCancel={() => setIsModalVisible(false)}
        record={currentRecord}
        componentName="illegalEcological"
        fetchElderlySubsidy={fetchData} // 传递新的 fetchData 函数
      />
    </div>
  );
};

export default IllegalEcological;
